<template>
  <div class="new-page table-h-48">
    <a-form-model layout="inline" :model="search" class="comm-search-f" :style="`width: calc(100% - ${sideMenuWidth} - 33px)`">

      <!-- 筛选条件与查询 -->
      <!-- 故障码 -->
      <a-tabs class="fuyi" style="width:100%">
        <!-- AHM Benefit -->
    <a-tab-pane key="1" tab="AHM Benefit">
      <div>
        <a-select
    show-search
    placeholder="input search text"
    style="width: 200px"
    :default-active-first-option="false"
    :show-arrow="false"
    :filter-option="false"
    :not-found-content="null"
    :options="data"
    @search="handleSearch"
    @change="handleChange"
  ></a-select>
        <a-button  type="default" ghost :loading="roleListLoading" style="margin-right: 10px;margin-left: 10px;" @click="resetSearchHandler">
    重置
      </a-button>
    <a-button  type="primary" class="ml-15"  @click="changeTable({ current: 1 });">
      查询
    </a-button>
      </div>
      <a-button type="primary" ghost :loading="false" @click="addVisible=true" style="margin-top: 30px; margin-bottom: 30px">
        添加
      </a-button>
<a-table

      :columns="columns"
      size="middle"
      :data-source="roleList"
      
    />

    <a-modal
      v-model="addVisible"
      :mask-closable="false"
      title=""
      :confirm-loading="addLoading"
      :width="400"
      class="rt-i-modal"
      centered
      @ok="addConfirmHandler"
      @cancel="cancelHandler"
    >
      <span slot="closeIcon" class="c-dialog-close-icon">
        <a-icon :component="require('@/assets/icon/close.svg')" />
      </span>

      <div class="c-dialog-title fw-500">{{ addTitle }}信息维护</div>

      <a-form-model
        ref="addForm"
        :model="addForm"
        :rules="addRules"
        layout="horizontal"
      >
        <a-form-model-item label="" prop="name">
          <a-input
            v-model="addForm.name"
            placeholder=""
            class="input-type-o"
            style="width: 100%"
          />
        </a-form-model-item>

        <a-form-model-item prop="AHMbenefit">
          <span slot="label">AHM benefit<span class="text-color-9ea5b2 fs-12"></span></span>
          <a-textarea
            v-model="addForm.AHMbenefit"
            style="width: 100%"
            class="input-type-o"
            :auto-size="{ minRows: 5, maxRows: 8 }"
          />
          
          
        </a-form-model-item>

        <a-form-model-item prop="description">
          <span slot="label">Description<span class="text-color-9ea5b2 fs-12"></span></span>
          <a-textarea
            v-model="addForm.description"
            style="width: 100%"
            class="input-type-o"
            :auto-size="{ minRows: 5, maxRows: 8 }"
          />
          
          
        </a-form-model-item>
        
          
        
        <a-form-model-item prop="desc">
          <span slot="label">Cost<span class="text-color-9ea5b2 fs-12"></span></span>
          <a-textarea
            v-model="addForm.desc"
            style="width: 100%"
            class="input-type-o"
            :auto-size="{ minRows: 5, maxRows: 8 }"
          />
          
          
        </a-form-model-item>
      
      </a-form-model>

    </a-modal>

    <!-- 分配角色 -->
    <a-modal
      v-model="setRoleVisible"
      :mask-closable="false"
      title=""
      :confirm-loading="setLoading"
      :width="400"
      class="rt-i-modal"
      :dialog-style="{height:'635px'}"
      centered
      @ok="setConfirmHandler"
      @cancel="setCancelHandler"
    >
      <span slot="closeIcon" class="c-dialog-close-icon"><a-icon :component="require('@/assets/icon/close.svg')" /></span>

      <div class="c-dialog-title fw-500">分配菜单</div>
      <a-form-model
        ref="addForm"
        layout="horizontal"
      >
        <a-form-model-item prop="roleTrees">
          <a-tree
            ref="roleTree"
            :checked-keys="checkedKeys"
            checkable
            default-expand-all
            :auto-expand-parent="autoExpandParent"
            :tree-data="roleTreeListO"
            :replace-fields="{children:'children', title:'title', key:'id'}"
            @check="checkRole"
          />
        </a-form-model-item>
      </a-form-model>
    </a-modal>

    <!-- 分配资源 -->
    <a-modal
      v-model="setResourcVisible"
      :mask-closable="false"
      title=""
      :confirm-loading="setLoading"
      :width="400"
      class="rt-i-modal"
      :dialog-style="{height:'305px'}"
      centered
      @ok="setConfirmResourceHandler"
      @cancel="setCancelHandler"
    >
      <span slot="closeIcon" class="c-dialog-close-icon">
        <a-icon :component="require('@/assets/icon/close.svg')" />
      </span>

      <div class="c-dialog-title fw-500">分配资源</div>
      <a-form-model
        ref="addResourceForm"
        layout="horizontal"
      >
        <a-form-model-item prop="resourceCode">
          <a-select
            v-model="addResourceForm.resourceCode"
            show-arrow
            mode="multiple"
            :max-tag-count="3"
            style="minWidth: 100%"
            placeholder="资源"
            allow-clear
          >
            <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
            <a-select-option v-for="selectItem in listResourceData" :key="selectItem.code" :value="selectItem.code">
              {{ selectItem.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    </a-tab-pane>
    <!-- Action Taken -->
    <a-tab-pane key="2" tab="Action Taken">
      <div>
        <a-select
    show-search
    placeholder="input search text"
    style="width: 200px"
    :default-active-first-option="false"
    :show-arrow="false"
    :filter-option="false"
    :not-found-content="null"
    :options="data"
    @search="handleSearch"
    @change="handleChange"
  ></a-select>
        <a-button  type="default" ghost :loading="roleListLoading" style="margin-right: 10px;margin-left: 10px;" @click="resetSearchHandler">
    重置
      </a-button>
    <a-button  type="primary" class="ml-15"  @click="changeTable({ current: 1 });">
      查询
    </a-button>
      </div>
      <a-button type="primary" ghost :loading="false" @click="addVisible=true" style="margin-top: 30px; margin-bottom: 30px">
        添加
      </a-button>
<a-table

      :columns="columns"
      size="middle"
      :data-source="roleList"
    />

    <a-modal
      v-model="addVisible"
      :mask-closable="false"
      title=""
      :confirm-loading="addLoading"
      :width="400"
      class="rt-i-modal"
      centered
      @ok="addConfirmHandler"
      @cancel="cancelHandler"
    >
      <span slot="closeIcon" class="c-dialog-close-icon">
        <a-icon :component="require('@/assets/icon/close.svg')" />
      </span>

      <div class="c-dialog-title fw-500">{{ addTitle }}信息维护</div>

      <a-form-model
        ref="addForm"
        :model="addForm"
        :rules="addRules"
        layout="horizontal"
      >
        <a-form-model-item label="" prop="name">
          <a-input
            v-model="addForm.name"
            placeholder=""
            class="input-type-o"
            style="width: 100%"
          />
        </a-form-model-item>

        <a-form-model-item prop="AHMbenefit">
          <span slot="label">AHM benefit<span class="text-color-9ea5b2 fs-12"></span></span>
          <a-textarea
            v-model="addForm.AHMbenefit"
            style="width: 100%"
            class="input-type-o"
            :auto-size="{ minRows: 5, maxRows: 8 }"
          />
          
          
        </a-form-model-item>

        <a-form-model-item prop="description">
          <span slot="label">Description<span class="text-color-9ea5b2 fs-12"></span></span>
          <a-textarea
            v-model="addForm.description"
            style="width: 100%"
            class="input-type-o"
            :auto-size="{ minRows: 5, maxRows: 8 }"
          />
          
          
        </a-form-model-item>
        
          
        
        <a-form-model-item prop="desc">
          <span slot="label">Cost<span class="text-color-9ea5b2 fs-12"></span></span>
          <a-textarea
            v-model="addForm.desc"
            style="width: 100%"
            class="input-type-o"
            :auto-size="{ minRows: 5, maxRows: 8 }"
          />
          
          
        </a-form-model-item>
      
      </a-form-model>

    </a-modal>

    <!-- 分配角色 -->
    <a-modal
      v-model="setRoleVisible"
      :mask-closable="false"
      title=""
      :confirm-loading="setLoading"
      :width="400"
      class="rt-i-modal"
      :dialog-style="{height:'635px'}"
      centered
      @ok="setConfirmHandler"
      @cancel="setCancelHandler"
    >
      <span slot="closeIcon" class="c-dialog-close-icon"><a-icon :component="require('@/assets/icon/close.svg')" /></span>

      <div class="c-dialog-title fw-500">分配菜单</div>
      <a-form-model
        ref="addForm"
        layout="horizontal"
      >
        <a-form-model-item prop="roleTrees">
          <a-tree
            ref="roleTree"
            :checked-keys="checkedKeys"
            checkable
            default-expand-all
            :auto-expand-parent="autoExpandParent"
            :tree-data="roleTreeListO"
            :replace-fields="{children:'children', title:'title', key:'id'}"
            @check="checkRole"
          />
        </a-form-model-item>
      </a-form-model>
    </a-modal>

    <!-- 分配资源 -->
    <a-modal
      v-model="setResourcVisible"
      :mask-closable="false"
      title=""
      :confirm-loading="setLoading"
      :width="400"
      class="rt-i-modal"
      :dialog-style="{height:'305px'}"
      centered
      @ok="setConfirmResourceHandler"
      @cancel="setCancelHandler"
    >
      <span slot="closeIcon" class="c-dialog-close-icon">
        <a-icon :component="require('@/assets/icon/close.svg')" />
      </span>

      <div class="c-dialog-title fw-500">分配资源</div>
      <a-form-model
        ref="addResourceForm"
        layout="horizontal"
      >
        <a-form-model-item prop="resourceCode">
          <a-select
            v-model="addResourceForm.resourceCode"
            show-arrow
            mode="multiple"
            :max-tag-count="3"
            style="minWidth: 100%"
            placeholder="资源"
            allow-clear
          >
            <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
            <a-select-option v-for="selectItem in listResourceData" :key="selectItem.code" :value="selectItem.code">
              {{ selectItem.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    </a-tab-pane>
    <!-- 后续处理计划 -->
    <a-tab-pane key="3" tab="后续处理计划">
      <div>
        <a-select
    show-search
    placeholder="input search text"
    style="width: 200px"
    :default-active-first-option="false"
    :show-arrow="false"
    :filter-option="false"
    :not-found-content="null"
    :options="data"
    @search="handleSearch"
    @change="handleChange"
  ></a-select>
        <a-button  type="default" ghost :loading="roleListLoading" style="margin-right: 10px;margin-left: 10px;" @click="resetSearchHandler">
    重置
      </a-button>
    <a-button  type="primary" class="ml-15"  @click="changeTable({ current: 1 });">
      查询
    </a-button>
      </div>
      <a-button type="primary" ghost :loading="false" @click="addVisible=true" style="margin-top: 30px; margin-bottom: 30px">
        添加
      </a-button>
<a-table

      :columns="columns"
      size="middle"
      :data-source="roleList"
    />

    <a-modal
      v-model="addVisible"
      :mask-closable="false"
      title=""
      :confirm-loading="addLoading"
      :width="400"
      class="rt-i-modal"
      centered
      @ok="addConfirmHandler"
      @cancel="cancelHandler"
    >
      <span slot="closeIcon" class="c-dialog-close-icon">
        <a-icon :component="require('@/assets/icon/close.svg')" />
      </span>

      <div class="c-dialog-title fw-500">{{ addTitle }}信息维护</div>

      <a-form-model
        ref="addForm"
        :model="addForm"
        :rules="addRules"
        layout="horizontal"
      >
        <a-form-model-item label="" prop="name">
          <a-input
            v-model="addForm.name"
            placeholder=""
            class="input-type-o"
            style="width: 100%"
          />
        </a-form-model-item>

        <a-form-model-item prop="AHMbenefit">
          <span slot="label">AHM benefit<span class="text-color-9ea5b2 fs-12"></span></span>
          <a-textarea
            v-model="addForm.AHMbenefit"
            style="width: 100%"
            class="input-type-o"
            :auto-size="{ minRows: 5, maxRows: 8 }"
          />
          
          
        </a-form-model-item>

        <a-form-model-item prop="description">
          <span slot="label">Description<span class="text-color-9ea5b2 fs-12"></span></span>
          <a-textarea
            v-model="addForm.description"
            style="width: 100%"
            class="input-type-o"
            :auto-size="{ minRows: 5, maxRows: 8 }"
          />
          
          
        </a-form-model-item>
        
          
        
        <a-form-model-item prop="desc">
          <span slot="label">Cost<span class="text-color-9ea5b2 fs-12"></span></span>
          <a-textarea
            v-model="addForm.desc"
            style="width: 100%"
            class="input-type-o"
            :auto-size="{ minRows: 5, maxRows: 8 }"
          />
          
          
        </a-form-model-item>
      
      </a-form-model>

    </a-modal>

    <!-- 分配角色 -->
    <a-modal
      v-model="setRoleVisible"
      :mask-closable="false"
      title=""
      :confirm-loading="setLoading"
      :width="400"
      class="rt-i-modal"
      :dialog-style="{height:'635px'}"
      centered
      @ok="setConfirmHandler"
      @cancel="setCancelHandler"
    >
      <span slot="closeIcon" class="c-dialog-close-icon"><a-icon :component="require('@/assets/icon/close.svg')" /></span>

      <div class="c-dialog-title fw-500">分配菜单</div>
      <a-form-model
        ref="addForm"
        layout="horizontal"
      >
        <a-form-model-item prop="roleTrees">
          <a-tree
            ref="roleTree"
            :checked-keys="checkedKeys"
            checkable
            default-expand-all
            :auto-expand-parent="autoExpandParent"
            :tree-data="roleTreeListO"
            :replace-fields="{children:'children', title:'title', key:'id'}"
            @check="checkRole"
          />
        </a-form-model-item>
      </a-form-model>
    </a-modal>

    <!-- 分配资源 -->
    <a-modal
      v-model="setResourcVisible"
      :mask-closable="false"
      title=""
      :confirm-loading="setLoading"
      :width="400"
      class="rt-i-modal"
      :dialog-style="{height:'305px'}"
      centered
      @ok="setConfirmResourceHandler"
      @cancel="setCancelHandler"
    >
      <span slot="closeIcon" class="c-dialog-close-icon">
        <a-icon :component="require('@/assets/icon/close.svg')" />
      </span>

      <div class="c-dialog-title fw-500">分配资源</div>
      <a-form-model
        ref="addResourceForm"
        layout="horizontal"
      >
        <a-form-model-item prop="resourceCode">
          <a-select
            v-model="addResourceForm.resourceCode"
            show-arrow
            mode="multiple"
            :max-tag-count="3"
            style="minWidth: 100%"
            placeholder="资源"
            allow-clear
          >
            <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
            <a-select-option v-for="selectItem in listResourceData" :key="selectItem.code" :value="selectItem.code">
              {{ selectItem.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    </a-tab-pane>
    

  </a-tabs>
      <!-- 故障码 -->

      <!-- 是否发送邮邮件或sms -->
    </a-form-model>


    
  </div>
</template>

<script>
import { mapActions, mapGetters, mapState, mapMutations } from 'vuex';
import {getList} from '../../../services/newRequest'
export default {
  methods: {
    handleChange(value) {
      console.log(`selected ${value}`);
    },
    handleBlur() {
      console.log('blur');
    },
    handleFocus() {
      console.log('focus');
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
  },
  data() {
    return {
      checkedKeys: [],
      halfCheckedKeys: [],
      autoExpandParent: true,
      selectedKeys: [],
      addVisible: false,
      addForm: {},
      addResourceForm: {},
      setRoleVisible: false,
      setResourcVisible: false,
      addTitle: '新增',
      addRules: Object.freeze({
        name: [
          { required: true, message: '请填写', trigger: 'change' }
        ]

      }),
      search: {},
      columns: Object.freeze([
        {
          title: '序号',
          align: 'left',
          customRender: (value, record) => {
            return value || '--';
          }
        },
        
        {
          title: 'inform',
          align: 'left',
          dataIndex: 'name',
          customRender: (value, record) => {
            return value || '--';
          }
        },
        {
          title: 'Description',
          align: 'left',
          dataIndex: 'description',
          customRender: (value, record) => {
            return value || '--';
          }
        },
        // {
        //   title: 'Cost',
        //   align: 'left',
        //   dataIndex: 'Cost',
        //   customRender: (value, record) => {
        //     return value || '--';
        //   }
        // },
         {
           title: 'Cost',
           align: 'left',
           dataIndex: 'Cost',
          customRender: (value, record) => {
            return value ? this.$moment.utc(value) : '--';
          }
         },
        {
          title: '操作',
          align: 'left',
          dataIndex: 'option',
          width: 250,
          customRender: (value, record, index) => {
            const { id } = record;
            return [
              <a-button type='link' onClick={() => this.editEventHandler(record, index)}>修改</a-button>,
              <a-popconfirm
                title='确认删除此项?'
                ok-type='danger'
                ok-text='确认'
                cancel-text='取消'
                onConfirm={() => this.delItemHandler(id)}
              >
                <a-button type='link'>删除</a-button>
              </a-popconfirm>
              // <a-button type='primary' size='small' ghost>版本管理</a-button>
            ];
          }
        }
      ])
    };
  },
  computed: {
    ...mapState('roles', [
      'roleList',
      'roleListLoading',
      'paginationOptions',
      'addLoading',
      'setLoading',
      'roleTreeListO',
      'roleTreeListP',
      'userRoleList',
      'listResourceData',
      'addResourceLoading',
      'listRoleResourceLoading',
      'listRoleResourceByRoleIdData'
    ]),
    ...mapGetters('setting', ['sideMenuWidth'])
  },
  mounted() {
    this.changeTable({ current: 1 });
    this.listResource();

  },
  methods: {
    ...mapMutations('roles', [
      'setState'
    ]),
    ...mapActions('roles', [
      'getListRole',
      'addRole',
      'delRole',
      'updateRole',
      'getMenuRoles',
      'allocMenu',
      'getListMenuApi',
      'listResource',
      'addResource',
      'getListRoleResourceByRoleId'
      // 'getList',
      // 'Dropdownbox',
      // 'Newevent',
      // 'modify',
      // 'maintain'
    ]),
    
    changeTable({ current, pageSize = 10 }) {
      if (pageSize !== this.paginationOptions.pageSize) {
        current = 1;
      }
      this.setState({ key: 'paginationOptions', payload: { ...this.paginationOptions, pageNum: current, pageSize }});
      this.getData();
    },
    getData() {
      this.getListRole(this.search);
    },
    getList(){
      this.getList(res)
    },
    // 重置
    resetSearchHandler() {
      this.search = {};
      this.changeTable({ current: 1 });
    },
    // 编辑
    editEventHandler(row, index) {
      this.addVisible = true;

      this.addForm = { ...row };
      this.rowIndex = index;
      this.addTitle = '修改';
    },
    // 确认删除
    delItemHandler(id) {
      this.delRole({ ids: [id] }).then((rep) => {
        if (rep) {
          this.getData();
        }
      });
    },
    addConfirmHandler() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          if (this.addForm.id) {
            this.updateRole(this.addForm).then((rep) => {
              if (rep) {
                this.cancelHandler();
                this.getData();
              }
            });
          } else {
            this.addRole(this.addForm).then((rep) => {
              if (rep) {
                this.cancelHandler();
                this.changeTable({ current: 1 });
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    async setRoleHandler(row) {
      this.addRow = { ...row };
      this.getMenuRoles();
      this.setRoleVisible = true;
      await this.getListMenuApi({ roleId: row.id });
      this.checkedKeys = [...this.userRoleList].flatMap(item => item.id).filter(item2 => {
        return !this.roleTreeListP.includes(item2);
      });
      this.halfCheckedKeys = [...this.userRoleList].flatMap(item => item.id).filter(item2 => {
        return ![...this.checkedKeys].includes(item2);
      });
    },

    async setResourcHandler(row) {
      this.addRow = { ...row };
      this.setResourcVisible = true;
      await this.getListRoleResourceByRoleId({ roleId: row.id });
      this.$set(this.addResourceForm, 'resourceCode', [...this.listRoleResourceByRoleIdData]);
    },
    // 设置权限
    setConfirmHandler() {
      const params = {
        roleId: this.addRow.id,
        menuIds: [...this.checkedKeys, ...this.halfCheckedKeys]
      };
      this.allocMenu(params).then((rep) => {
        if (rep) {
          this.getData();
          this.setCancelHandler();
          this.checkedKeys = [];
        }
      });
    },
    // 设置资源
    setConfirmResourceHandler() {
      const rbacRoleResourceRelations = (this.addResourceForm.resourceCode ?? []).map(item => {
        return {
          roleId: this.addRow.id,
          resourceCode: item
        };
      });

      if (rbacRoleResourceRelations.length === 0) {
        rbacRoleResourceRelations.push({
          roleId: this.addRow.id,
          resourceCode: ''
        });
      }
      this.addResource(rbacRoleResourceRelations).then((rep) => {
        if (rep) {
          this.getData();
          this.setCancelHandler();
          this.$refs.addResourceForm?.resetFields();
        }
      });
    },
    // 设置权限
    setCancelHandler() {
      this.addForm = {};
      this.addResourceForm = {};
      this.addVisible = false;
      this.setRoleVisible = false;
      this.setResourcVisible = false;
      this.$refs.addForm?.resetFields();
    },
    checkRole(checkedKeys, info) {
      const checkKey = [...checkedKeys];
      const halfCheckedKeys = [...info.halfCheckedKeys];
      this.halfCheckedKeys = halfCheckedKeys;
      this.checkedKeys = checkKey;
    },
    cancelHandler() {
      this.addVisible = false;
      this.addForm = {};
      this.addTitle = '新增';
      this.$refs.addForm.resetFields();
    }
  }
};
</script>

<style>
.ant-pagination-item-active{
  display: none;
}
</style>
